<template>
    <div id="register" class="register">
        <p class="register-title">用户注册</p>
        <el-form ref="userinfo" :model="userinfo" label-width="80px" :rules="rules">
            <div class="reg1">
            <el-form-item label="账&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp号" class="register-input" prop="account">
                <el-input placeholder="请输入账号"  v-model="userinfo.account" clearable></el-input>
            </el-form-item>           
            <el-form-item label="密&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp码" class="register-input" prop="password">
                <el-input placeholder="请输入密码" v-model="userinfo.password"  autocomplete="off" show-password clearable></el-input><span></span>
            </el-form-item>
            <el-form-item label="确认密码" class="register-input" prop="checkPass">
                <el-input placeholder="请再输入密码" v-model="userinfo.checkPass" show-password clearable></el-input><span></span>
            </el-form-item>
            </div>
            <div class="reg2">
            <el-form-item label="昵&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp称" class="register-input" prop="nickname">
                <el-input placeholder="请输入昵称"  v-model="userinfo.nickname"  clearable></el-input>
            </el-form-item>
            <el-form-item label="邮&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp箱" class="register-input" prop="email">
                <el-input placeholder="请输入邮箱"  v-model="userinfo.email"  clearable></el-input>
            </el-form-item>
            <el-form-item label="手机号码" class="register-input" prop="phone">
                <el-input placeholder="请输入手机号码"  v-model="userinfo.phone"  clearable maxlength="11"></el-input>
            </el-form-item>
            </div>
            <el-form-item label="" >
                <el-button type="primary" @click="register" class="btnRegister">注册</el-button>
                <el-button type="text" @click="login" class="btnLogin">已有帐号？马上去登陆</el-button>
            </el-form-item>
        </el-form>
    </div>
</template>

<script>
import instance from '@/utlis/request'
export default {
    name:"UserRegister",
    
    data(){
        var chackAccount = (rule,value,callback) => {

            instance.post("/userinfo/UserRegister",this.userinfo).then(res=>{
                //console.log(res.data);               
                if(value == res.data.data.existUser.account){
                    callback(new Error('该账户已存在'));
                }                  
            })
        };
        var validatePass2 = (rule, value, callback) => {
            if (value != this.userinfo.password) {
                callback(new Error('两次输入密码不一致!'));
            } 
        };
        var checkNickname = (rule,value,callback) => {
            if(!(/^[u4e00-u9fa5]{3,8}$/.test(value))){
                callback(new Error('昵称请输入3~8个字符'));
            }
        };
        var checkPhone = (rule,value,callback) => { 
            
            if(!(/^(13[0-9]|14[01456879]|15[0-3,5-9]|16[2567]|17[0-8]|18[0-9]|19[0-3,5-9])\d{8}$/.test(value))){ 
                callback(new Error('手机号码格式有误'));                  
            }
        } 
        return{
            userinfo:{
                account:'',
                nickname:'',
                password:'',
                checkPass:'',
                email:'',
                phone:'',
            },
            rules: {  
                account:[
                    {required:true,message:'账号不能为空',trigger:'blur'},
                    {validator:chackAccount,trigger:'blur'}
                ],             
                password: [
                    { required:true, message:'密码不能为空', trigger: 'blur' }
                ],
                checkPass: [
                    { required:true,message:'确认密码不能为空',trigger: 'blur' },
                    {validator: validatePass2,trigger:'blur'}
                ],
                nickname:[
                    {required:true,message:'昵称不能为空',trigger:'blur'},
                    {validator:checkNickname,trigger:'blur'}
                ],
                email:[           
                    { required: true, message: '请输入邮箱地址', trigger: 'blur' },
                    { type: 'email', message: '请输入正确的邮箱地址', trigger: ['blur', 'change'] }
                ],
                phone:[
                    {required: true, message: '请输入电话号码',trigger: 'blur'},
                    {validator:checkPhone,trigger:'blur'}
                ]
            }
        }
        
    },
    methods: {
        register(){
            instance.post("/userinfo/UserRegister",this.userinfo).then(res=>{
                //console.log(res.data);
                if(res.data.success){
                    this.$router.push({name:"UserLoginView"});
                }
            })
        },
        login(){
            this.$router.push({name:"UserLoginView"});
        }
    },
}
</script>

<style scoped>
    .register{
        width: 800px;
        height: 500px;        
        margin: 0 auto;
        margin-top: 100px;
        margin-bottom: 200px;
        box-shadow: 0 2px 4px rgba(236, 11, 11, 0.12);
    }
    .register-title{
        margin-top: 30px;
        text-align: center;
        margin-bottom: 30px;
        font-size: 30px;
    }
    .register-input{        
        width: 300px;
        margin: 0 auto;
        margin-top: 20px;
        margin-left: 50px;
        margin-right: 50px;
        margin-bottom: 20px;
    }
    .reg1{
        float: left;
    }
    .reg2{
        float: left;
    }
    .btnRegister{
        position: relative;
        top: 230px;
        right: 600px;
    }
    .btnLogin{
        position: relative;
        top: 190px;
        right: 450px;
    }
</style>